import { useState, useRef } from 'react';
import { Button, Space, Form, Input, message, Row, Col, Alert } from 'antd';
import { connect, useIntl } from 'umi';
import request from '@/utils/request';

const apiURL = '/api/services/app/PartBin/';

const ViewPage = (props: any) => {
  const [loading, setLoading] = useState(false);
  const [partLenght, setPartLenght] = useState(0);
  const [partLenght2, setPartLenght2] = useState(0);
  const formRef = useRef<any>();
  const intl = useIntl();

  const onFinish = (values: any) => {
    let act = 'StockTransfer';
    const method = 'POST';
    let PartNumList = values.model?.PartNumList.split(/[(\r\n)\r\n]+/);
    let PartNumListNew = values.model?.PartNumListNew.split(/[(\r\n)\r\n]+/);

    if (PartNumList.length != PartNumListNew.length) {
      message.error(intl.formatMessage({ id: 'pages.transfer.twosideEqual' }));
      return;
    }
    const data: any = [];
    for (var i = 0; i < PartNumList.length; i++) {
      data.push({
        partNum: PartNumList[i],
        partNumNew: PartNumListNew[i],
      });
    }
    setLoading(true);
    request(apiURL + act, {
      method,
      data,
    }).then((response) => {
      if (response) {
        if (response.success && response.result) {
          if (response.result.success) {
            message.success(response.result.message);
          } else {
            message.error(response.result.message);
          }
        }
        setLoading(false);
      }
    });
  };

  const countPart = (e: any, t: number = 0) => {
    const values = e.target.value;
    let PartNumList = values?.split(/[(\r\n)\r\n]+/);
    if (t == 0) {
      setPartLenght(PartNumList.length);
    } else {
      setPartLenght2(PartNumList.length);
    }
  };

  return (
    <Form ref={formRef} onFinish={onFinish} layout="vertical">
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Alert
            type="warning"
            description={intl.formatMessage({ id: 'pages.transfer.warningtext' })}
            showIcon
            closable
          />
        </Col>
        <Col span={12}>
          <Form.Item
            label={intl.formatMessage({id:'pages.transfer.object'}) + partLenght}
            name={['model', 'PartNumList']}
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.transfer.object.required' }),
              },
            ]}
          >
            <Input.TextArea rows={12} onChange={(e) => countPart(e)} />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label={intl.formatMessage({id:'pages.transfer.target'}) + partLenght2}
            name={['model', 'PartNumListNew']}
            rules={[
              {
                required: true,
                message: intl.formatMessage({id:'pages.transfer.target.required'}),
              },
            ]}
          >
            <Input.TextArea rows={12} onChange={(e) => countPart(e, 1)} />
          </Form.Item>
        </Col>
      </Row>

      <Form.Item>
        <Space>
          <Button key="1" type="primary" htmlType="submit" loading={loading}>
            {intl.formatMessage({id:'pages.transfer.confirm'})}
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default connect(({ Abp, user }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: user.currentUser,
}))(ViewPage);
